<template>
  <el-container>
    <!-- Header -->
    <el-header class="header">
      <el-row type="flex" justify="space-between" align="middle">
        <div class="logo">
          <img src="../../assets/images/logo.png" alt="Logo" />
          岳麓书院知识图谱
        </div>
        <el-menu
          :default-active="activeMenu"
          mode="horizontal"
          @select="horizontal"
          class="nav-menu"
        >
          <el-menu-item index="userManagement">用户管理</el-menu-item>
          <el-menu-item index="dataRetrieval">检索数据</el-menu-item>
          <el-menu-item index="dataManagement">管理数据</el-menu-item>
          <el-menu-item index="messageCenter">消息中心</el-menu-item>
        </el-menu>
      </el-row>
    </el-header>
    <el-container>
      <!-- Aside Sidebar -->
      <el-aside width="200px" class="aside">
        <el-menu
          :default-active="activeSubMenu"
          mode="vertical"
          @select="handleAsideSelect"
        >
          <el-menu-item index="ordinaryUser">
            <img
              src="../../assets/images/ord_user.png"
              alt="普通用户"
              class="menu-icon"
            />
            <template #title>
             <span>普通用户</span>
            </template>
          </el-menu-item>
          <el-menu-item index="advancedUser">
            <img
              src="../../assets/images/adv_user.png"
              alt="高级用户"
              class="menu-icon"
            />
            <template #title>
             <span>高级用户</span>
            </template>
          </el-menu-item>
          <el-menu-item index="feedbackRecord">
            <img
              src="../../assets/images/fedb_record.png"
              alt="反馈记录"
              class="menu-icon"
            />
            <template #title>
             <span>反馈记录</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- Main Content -->
      <el-main class="main">
        <div v-if="selectedSection === 'ordinaryUser'">
          <!-- OrdinaryUser Management -->
          <div>
            <p>用户管理 / 普通用户</p>
          </div>

          <hr />
          <br />

          <div class="content-header">
            <el-form
              ref="ordUserManageFormRef"
              :model="ordUserManageForm"
              :rules="rules"
              class="ordUserManage-form"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="用户名" prop="User">
                    <el-input
                      v-model="ordUserManageForm.User"
                      placeholder="请输入"
                      class="input"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="账号" prop="Account">
                    <el-input
                      v-model="ordUserManageForm.Account"
                      placeholder="请输入"
                      class="input"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="手机号" prop="Phone">
                <el-input
                  v-model="ordUserManageForm.Phone"
                  placeholder="请输入"
                  class="input"
                ></el-input>
              </el-form-item>
            </el-form>

            <div class="actions">
              <el-button type="primary" @click="search" class="search-button">
                查询
              </el-button>
              <el-button @click="reset" class="reset-button"> 重置 </el-button>
              <el-button @click="refresh" class="refresh-button">
                刷新
              </el-button>
            </div>
          </div>

          <hr />

          <div class="button-container">
            <el-button type="primary" @click="create" class="create-button">
              + 新建
            </el-button>
            <el-button
              @click="bulkDelete"
              class="bulkDelete-button white-button"
            >
              批量删除
            </el-button>
            <el-button @click="bulkReset" class="bulkReset-button white-button">
              批量重置
            </el-button>
            <el-button
              @click="bulkAuthorization"
              class="bulkAuthorization-button white-button"
            >
              批量授权
            </el-button>
          </div>

          <div v-if="filteredMessages.length === 0" class="no-results">
            <p>未查询到此用户</p>
          </div>

          <div v-else>
            <el-table
              :data="paginatedMessages"
              @selection-change="handleSelectionChange"
              style="width: 100%"
            >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column prop="UserName" label="用户名"></el-table-column>
              <el-table-column prop="ID" label="账号"></el-table-column>
              <el-table-column prop="PhoneNum" label="手机号"></el-table-column>
              <el-table-column
                prop="CreateDate"
                label="创建时间"
              ></el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <el-button
                    type="text"
                    @click="authorizeMessage(scope.row)"
                    class="bold-button"
                    >授权</el-button
                  >
                  <el-button
                    type="text"
                    @click="resetMessage(scope.row)"
                    class="bold-button"
                    >重置</el-button
                  >
                  <el-button
                    type="text"
                    @click="deleteMessage(scope.row)"
                    class="bold-button"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalMessages"
            >
            </el-pagination>
          </div>
        </div>
        <div v-if="selectedSection === 'advancedUser'">
          <!-- advancedUser Management -->
          <div>
            <p>用户管理 / 高级用户</p>
          </div>

          <hr />
          <br />

          <div class="content-header">
            <el-form
              ref="ordUserManageFormRef"
              :model="ordUserManageForm"
              :rules="rules"
              class="ordUserManage-form"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="用户名" prop="User">
                    <el-input
                      v-model="ordUserManageForm.User"
                      placeholder="请输入"
                      class="input"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="账号" prop="Account">
                    <el-input
                      v-model="ordUserManageForm.Account"
                      placeholder="请输入"
                      class="input"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="手机号" prop="Phone">
                <el-input
                  v-model="ordUserManageForm.Phone"
                  placeholder="请输入"
                  class="input"
                ></el-input>
              </el-form-item>
            </el-form>

            <div class="actions">
              <el-button type="primary" @click="search" class="search-button">
                查询
              </el-button>
              <el-button @click="reset" class="reset-button"> 重置 </el-button>
              <el-button @click="refresh" class="refresh-button">
                刷新
              </el-button>
            </div>
          </div>

          <hr />

          <div class="button-container">
            <el-button type="primary" @click="create" class="create-button">
              + 新建
            </el-button>
            <el-button
              @click="bulkDelete"
              class="bulkDelete-button white-button"
            >
              批量删除
            </el-button>
            <el-button @click="bulkReset" class="bulkReset-button white-button">
              批量重置
            </el-button>
            <el-button
              @click="bulkAuthorization"
              class="bulkAuthorization-button white-button"
            >
              批量授权
            </el-button>
          </div>

          <div v-if="filteredMessages.length === 0" class="no-results">
            <p>未查询到此用户</p>
          </div>

          <div v-else>
            <el-table
              :data="paginatedMessages"
              @selection-change="handleSelectionChange"
              style="width: 100%"
            >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column prop="UserName" label="用户名"></el-table-column>
              <el-table-column prop="ID" label="账号"></el-table-column>
              <el-table-column prop="PhoneNum" label="手机号"></el-table-column>
              <el-table-column
                prop="CreateDate"
                label="创建时间"
              ></el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <el-button
                    type="text"
                    @click="authorizeMessage(scope.row)"
                    class="bold-button"
                    >授权</el-button
                  >
                  <el-button
                    type="text"
                    @click="resetMessage(scope.row)"
                    class="bold-button"
                    >重置</el-button
                  >
                  <el-button
                    type="text"
                    @click="deleteMessage(scope.row)"
                    class="bold-button"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalMessages"
            >
            </el-pagination>
          </div>
        </div>
        <div v-if="selectedSection === 'feedbackRecord'">
          <div>
            <p>用户管理 / 反馈记录</p>
          </div>

          <hr />
          <br />

          <div class="content-header">
            <el-form
              ref="ordUserManageFormRef"
              :model="ordUserManageForm"
              :rules="rules"
              class="ordUserManage-form"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="用户名" prop="User">
                    <el-input
                      v-model="ordUserManageForm.User"
                      placeholder="请输入"
                      class="input"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="账号" prop="Account">
                    <el-input
                      v-model="ordUserManageForm.Account"
                      placeholder="请输入"
                      class="input"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>


            <div class="actions">
              <el-button type="primary" @click="search" class="search-button">
                查询
              </el-button>
              <el-button @click="reset" class="reset-button"> 重置 </el-button>
              <el-button @click="refresh" class="refresh-button">
                刷新
              </el-button>
            </div>
          </div>

          <hr />

          <div class="button-container">
            <el-button
              @click="bulkDelete"
              class="bulkDelete-button white-button"
            >
              批量删除
            </el-button>
          </div>

          <div v-if="filteredMessages.length === 0" class="no-results">
            <p>未查询到此用户</p>
          </div>

          <div v-else>
            <el-table
              :data="paginatedMessages"
              @selection-change="handleSelectionChange"
              style="width: 100%"
            >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column prop="UserName" label="用户名"></el-table-column>
              <el-table-column prop="ID" label="账号"></el-table-column>
              <el-table-column prop="PhoneNum" label="手机号"></el-table-column>
              <el-table-column
                prop="CreateDate"
                label="反馈总数/被采纳数"
              ></el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <el-button
                    type="text"
                    @click="authorizeMessage(scope.row)"
                    class="bold-button"
                    >查看记录</el-button
                  >
                  <el-button
                    type="text"
                    @click="deleteMessage(scope.row)"
                    class="bold-button"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalMessages"
            >
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      v-model="dialogVisible"
      title="新增"
      width="500"
      :before-close="handleClose"
    >
      <el-input
        v-model="addUserManageForm.UserName"
        style="max-width: 600px; margin-top: 15px"
        placeholder="请输入"
      >
        <template #prepend>用户名</template>
      </el-input>
      <el-input
        v-model="addUserManageForm.ID"
        style="max-width: 600px; margin-top: 15px"
        placeholder="请输入"
      >
        <template #prepend>帐号</template>
      </el-input>
      <el-input
        v-model="addUserManageForm.PhoneNum"
        style="max-width: 600px; margin-top: 15px"
        placeholder="请输入"
      >
        <template #prepend>手机号</template>
      </el-input>
      <!-- <span>新增</span> -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confimAdd"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { tokenStore } from "../../store/token";
import { userInfoStore } from "../../store/userInfo";

const activeMenu = ref("userManagement");
const activeSubMenu = ref("ordinaryUser");
const selectedRows = ref([]);

const userMessages = ref([
  {
    UserName: "123",
    ID: "001",
    PhoneNum: "130",
    CreateDate: "2024-09-01 10:15:23",
    FeedbackCount: 5, // 反馈信息总数
    AdoptedCount: 3   // 被采纳信息数
  },
  {
    UserName: "测试用户2",
    ID: "002",
    PhoneNum: "18683552277",
    CreateDate: "2024-10-02 13:23:43",
    FeedbackCount: 10, // 反馈信息总数
    AdoptedCount: 7    // 被采纳信息数
  },
]);

const selectedSection = ref("ordinaryUser");
const currentPage = ref(1);
const pageSize = ref(10);

const ordUserManageForm = reactive({
  User: "",
  Account: "",
  Phone: "",
});
const addUserManageForm = reactive({
  UserName: "",
  ID: "",
  PhoneNum: "",
  CreateDate: "",
});

const rules = {
  User: [{ required: false, message: "请输入用户名", trigger: "blur" }],
  Account: [{ required: false, message: "请输入账号", trigger: "blur" }],
  Phone: [{ required: false, message: "请输入手机号", trigger: "blur" }],
};

const filteredMessages = computed(() => {
  return userMessages.value.filter((user) => {
    return (
      (!ordUserManageForm.User ||
        user.UserName.includes(ordUserManageForm.User)) &&
      (!ordUserManageForm.Account ||
        user.ID.includes(ordUserManageForm.Account)) &&
      (!ordUserManageForm.Phone ||
        user.PhoneNum.includes(ordUserManageForm.Phone))
    );
  });
});

const totalMessages = computed(() => filteredMessages.value.length);

const paginatedMessages = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredMessages.value.slice(start, end);
});
// console.log(paginatedMessages,'paginatedMessages');

const horizontal = (index) => {
  activeMenu.value = index;
};

const handleAsideSelect = (index) => {
  activeSubMenu.value = index;
  selectedSection.value = index;
};

const search = () => {
  currentPage.value = 1; // 重置当前页为第一页
  console.log("Filtered Messages:", filteredMessages.value);
  console.log("Paginated Messages:", paginatedMessages.value);
};

const reset = () => {
  ordUserManageForm.User = "";
  ordUserManageForm.Account = "";
  ordUserManageForm.Phone = "";
  currentPage.value = 1; // 重置当前页为第一页
};

const refresh = () => {
  // 实现刷新逻辑
};
const dialogVisible = ref(false);
const create = () => {
  dialogVisible.value = true;
};
const handleClose = (done: () => void) => {
  addUserManageForm.UserName = "";
  addUserManageForm.ID = "";
  addUserManageForm.PhoneNum = "";
  addUserManageForm.CreateDate = "";
  dialogVisible.value = false;
};
const confimAdd = () => {
  addUserManageForm.CreateDate = formatDate(new Date());
  userMessages.value.push({ ...addUserManageForm });
  console.log(userMessages.value, addUserManageForm, "userMessages.value");

  handleClose();
};
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
interface Message {
  UserName: string;
  ID: string;
  PhoneNum: string;
  CreateDate: string;
}

// 选中项数组
const selectedMessages = ref<Message[]>([]);

// 处理选择项变化
const handleSelectionChange = (selection: Message[]) => {
  selectedMessages.value = selection;
  console.log(selectedMessages.value, "selectedMessages.value");
};
const bulkDelete = () => {
  // 实现批量删除逻辑
  if (selectedMessages.value.length === 0) {
    ElMessage.warning("请选择要删除的项");
    return;
  }

  ElMessageBox.confirm("确定要删除选中的用户吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userMessages.value = userMessages.value.filter(
        (item) => !selectedMessages.value.includes(item)
      );
      ElMessage.success("删除成功");
      selectedMessages.value = []; // 清空选中项
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

const bulkReset = () => {
  // 实现批量重置逻辑
};

const bulkAuthorization = () => {
  // 实现批量授权逻辑
};

const authorizeMessage = (row) => {
  // 实现单个授权逻辑
};

const resetMessage = (row) => {
  // 实现单个重置逻辑
};

const deleteMessage = (row) => {
  userMessages.value = userMessages.value.filter(
    (message) => message.ID !== row.ID
  );
  // 实现单个删除逻辑
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
};

// const getBoundingClientRect = (newPage) => {
//   currentPage.value = newPage;
// };
</script>

<style scoped>
.logo {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.logo img {
  width: 40px;
  margin-right: 10px;
}

.profile {
  text-align: center;
  padding: 20px 0;
}

.profile p {
  margin-top: 10px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.actions {
  display: flex;
  gap: 10px;
}

.header {
  border-bottom: 1px solid #dcdfe6;
}

.nav-menu {
  width: 1200px;
  display: flex;
}

.nav-menu .el-menu-item {
  padding: 0 100px;
}

.aside {
  border-right: 1px solid #dcdfe6;
}

.main {
  padding: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}

.user-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.user-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-actions .el-button {
  width: auto;
}

.user-info-form {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-input.is-disabled .el-input__inner {
  color: #606266;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.mt-4 {
  margin-top: 1rem;
}

.blue-button {
  background-color: blue;
  border-color: rgb(139, 139, 181);
  color: white;
}

.white-button {
  background-color: rgb(238, 231, 231);
  color: red;
  border-color: red; /* 可选：设置边框颜色 */
}

.button-container {
  display: flex;
  justify-content: flex-end; /* 将内容对齐到行的末尾 */
}

.bold-button {
  font-weight: bold;
}

.no-results {
  text-align: center;
  color: red;
  margin: 20px 0;
}
</style>
